import {ElMessage} from "element-plus";
import ArkDialogForm from "../ark-dialog-form/ArkDialogForm.vue";
import {ArkDialogFormOptions} from "../ark-dialog-form/ArkDialogFormOptions";
import {FormItem} from "../../basic/ark-form/ArkFormOptions";
import ArkTipType from "../../common-type/ark-tip-type";
import ArkInteractionType from "../../common-type/ark-interaction-type";
import dayjs from "dayjs";

export default {
  title: 'ark-component-v2/ArkDialogForm',
  component: ArkDialogForm,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">ArkDialog、ArkForm</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'ArkDialogFormOptions'},
    header: {description: '对话框头部'},
    default: {description: '对话框内容部分'},
    footer: {description: '对话框脚部'},
    '\'formItem-\' + item.prop': {description: '表单项内容部分，参数为model、formItem'},
    '\'formItemLabel-\' + item.prop': {description: '表单项名称部分，参数为model、formItem'},
    '\'formItemInteraction-\' + item.prop': {description: '表单项组件部分，参数为model、formItem'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args: ArkDialogFormOptions) => ({
    components: {ArkDialogForm},
    setup() {
      return {args};
    },
    template: `
      <div style="width: 850px;height: 700px">
        <el-button type="primary" @click="args.options.show=true">打开表单对话框</el-button>

        <ArkDialogForm v-model:options="args.options"></ArkDialogForm>
      </div>
    `,
  }),
  args: {
    options: {
      show: false,
      title: '对话框标题',
      form: {
        layout: {
          column: 1,
        },
        formItems: [
          {
            label: (model: Readonly<Record<string, any>>) => {
              console.log('label', model)
              return '姓名'
            },
            prop: 'name',
            tip: {
              title: '提示标题',
              content: '提示内容',
              type: ArkTipType.WARNING,
            },
            show: true,
            rule: (params: { [propName: string]: any }) => {
              console.log('rule', params)
              return {required: true, message: '姓名不能为空'}
            },
          },
          {
            label: '性别',
            prop: 'sex',
            value: 'nan',
            interaction: {
              type: ArkInteractionType.RADIO,
              options: [
                {text: '男', value: 'nan'},
                {text: '女', value: 'nv'},
              ],
            }
          },
          {
            label: '角色',
            prop: 'role',
            value: '',
            interaction: {
              type: ArkInteractionType.SELECT,
              options: () => {
                return Promise.resolve([
                  {text: '管理员', value: 'admin'},
                  {text: '医生', value: 'docter'},
                  {text: '老师', value: 'teacher'},
                  {text: '学生', value: 'student'},
                ])
              },
              extraAllOptionForAsync: true
            }
          },
          {
            label: '备注',
            prop: 'remark',
            interaction: {
              type: ArkInteractionType.TEXT_AREA,
              rows: 10,
            }
          },
          {
            label: '年龄',
            prop: 'age',
            value: 10,
            interaction: {
              type: ArkInteractionType.NUMBER,
              min: 0,
              max: 100,
              step: 10
            }
          },
          {
            label: '系统',
            prop: 'system',
            value: 'STORYBOOK',
            interaction: {
              type: ArkInteractionType.READONLY_TEXT,
              transform: (val: any) => {
                console.log('transform', val)
                return `${val}系统`
              }
            }
          },
          {
            label: '日期',
            prop: 'date',
            value: dayjs().format('YYYY-MM-DD'),
            interaction: {
              type: ArkInteractionType.DATE,
              valueFormat: 'YYYY-MM-DD',
              showFormat: 'YYYY~MM~DD',
            }
          },
        ],
        onFormItemEnter: (formItem: FormItem) => {
          ElMessage({
            message: '表单项回车操作，参数请看控制台打印',
            type: 'success',
          });
          console.log(formItem)
        },
      },
      footer: {
        show: true,
        confirm: {},
        cancel: {}
      },
      onClose: () => {
        ElMessage({
          message: '关闭对话框操作，无参数',
          type: 'success',
        });
      }
    }
  },
};